<template>
    <div class="tips" v-show="tipsState">
       <transition @after-leave="afterLeave" name="tips-slide">
            <div class="tips__container" v-if="show">
                {{text || '这里是提示'}}
            </div>
       </transition>
    </div>
</template>

<script>
export default {
    name: 'Tips',
    data: function() {	
        return {
            tipsState: this.control,
            show: this.control,
            timer: null
        }
    },
    watch: {
        control (n, o) {
            this.show = n;
            if(n){
                 this.tipsState = n;
                 this.runTimeout();
            }else{
                clearTimeout(this.timer);
            }
        }
    },
    methods: {
        afterLeave () {
            this.tipsState = false;
            this.$emit('update:control', false);
        },
        close (){
            this.show = false;
        },
        runTimeout() {
             let time = this.timeout;
             if(time){
                clearTimeout(this.timer);
                this.timer = setTimeout(_ => {
                    this.close()
                }, time);
            }
        }
    },
    props: ['control', 'text', 'timeout']
}
</script>

<style lang="scss" scoped>
    .tips {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 100000;
        &__container {
            word-break: keep-all;
            white-space: nowrap;
            position: absolute;
            top: 30%;
            left: 50%;
            transform: translate3d(-50%, -50%, 0);
            font-size: .26rem;
            padding: .1rem .3rem;
            border-radius: 4px;
            color: #fff;
            background-color: rgba(0,0,0,.8);
        }
        &-slide {
            &-enter {
                // transform: translate3d(-50%, 100%, 0);
                opacity: 0;
                &-active {
                    transition: all .3s ease-out;
                }
                &-to {
                    opacity: 1;
                    // transform: translate3d(-50%, -1.5rem, 0);
                }
            }
            &-leave {
                opacity: 1;
                &-active {
                     transition: all .2s ease-in-out;
                }
                &-to {
                    opacity: 0;
                }
            }
        }
    }

    
</style>